<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
    <link rel="stylesheet" href="plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link href="Hplus/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/zy/index.css">
    <link href="Hplus/css/animate.css" rel="stylesheet">
    <link href="Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/zy/pay.css">
    <style>
  
  .type{
        width: 280px;
        height: 100px;
        /* border: 1px solid red; */
       background-image: url(imgs/zy/优惠券.png);
       background-size:100% 100%;
background-repeat:no-repeat;
        position:relative;
    }
    </style>
</head>
<body>

       <div class="pays">
         <div class="ups">
             <div class="up_firsts">
                 <div class="first_lefts">
                     <img src="imgs/zy/成功.png" alt="">
                 </div>
                 <div class="first_rights">
                     <div class="right_up">
                         <span>订单提交成功!</span>
                         <p>请及时付款,以便快速处理您的订单</p>
                     </div>
                     <div class="right_end">
                         <div class="end_up">
                           应付金额￥:<span class="price">100.00元</span>

                        </div>

                    </div>

                </div>

             </div>
             
             <div class="up_second">
                <div style="width: 100%;height: 1px;background-color: #e0e0e0;"></div>
                 <div class="second_one">
                     订单号:<span>123456</span>
                 </div>
                 <div class="second_two">
                     商品名称:<span>欢乐团员聚套餐</span>
                 </div>
                 <div class="messages">
                     <img src="imgs/zy/中餐.jpg" alt="">


                </div>
                <div class="now_status">
                   
                    <button class="btn btn-w-m btn-info"  data-toggle="modal" data-target="#myModal">
                        选择优惠券
                      </button>
                      <!-- 模态框（Modal） -->
                      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                          &times;
                                      </button>
                                      <h4 class="modal-title" id="myModalLabel">
                                          请选择优惠券
                                      </h4>
                                  </div>
                                  <div class="modal-body">
                                      <div class="fixed-table-body">
                                          
                                          <table id="exampleTableFormData" data-mobile-responsive="true" class="table table-hover" style="margin-top: -37px">
                                          <thead><tr><th style="" data-field="Tid" tabindex="0">
                                              <div class="fht-cell"></div></th><th style="" data-field="First" tabindex="0">
                                                 
                                                          <div class="fht-cell"></div></th></tr></thead>
                                      <tbody>
                                          <tr data-index="0"><td style=""> 
                                              <div class="radio">
                                                  <label class="radio-inline">
                                                      <input type="radio" name="status" id="status" value="0">
                                                      </label></td><td style="">
                                              </div>
                                              <div class="type">
                                              <div class="type_left">
                                                  <div class="left_top">
                                                      <span class="shop">XXXX折扣店</span>
                                                  </div>
                                                  <div class="left_down">
                                                      <span class="price">￥50.00</span>优惠券
                                                  </div>
                                                  <div class="left_end">
                                                      订单满<span class="price_before">100元</span>
                                      
                                                  </div>
                                      
                                              </div>
                                              <div style="width: 1px;height: 100%;background-color: #e0e0e0;margin-left: 180px;"></div>
                                              <div class="type_right">
                                                  <div class="right_top">
                                                      <span>有效时间</span>
                                                  </div>
                                                  <div class="right_down">
                                                      <span>2022年4月10日</span>
                                                      <span>2022年6月10日</span>
                                                  </div>
                                                  <div class="rights_end">
                                                      <span>待使用</span>
                                                  </div>
                                                 
                                      
                                              </div>
                                      
                                          </div></td></tr>
                                          <tr data-index="1"><td style=""> 
                                              <div class="radio">
                                                  <label class="radio-inline">
                                                      <input type="radio" name="status" id="status" value="0">
                                                      </label></td><td style="">
                                              </div>
                                              <div class="type">
                                              <div class="type_left">
                                                  <div class="left_top">
                                                      <span class="shop">XXXX折扣店</span>
                                                  </div>
                                                  <div class="left_down">
                                                      <span class="price">￥50.00</span>优惠券
                                                  </div>
                                                  <div class="left_end">
                                                      订单满<span class="price_before">100元</span>
                                      
                                                  </div>
                                      
                                              </div>
                                              <div style="width: 1px;height: 100%;background-color: #e0e0e0;margin-left: 180px;"></div>
                                              <div class="type_right">
                                                  <div class="right_top">
                                                      <span>有效时间</span>
                                                  </div>
                                                  <div class="right_down">
                                                      <span>2022年4月10日</span>
                                                      <span>2022年6月10日</span>
                                                  </div>
                                                  <div class="rights_end">
                                                      <span>待使用</span>
                                                  </div>
                                                 
                                      
                                              </div>
                                      
                                          </div></td></tr>
                                          <tr data-index="2"><td style=""> 
                                              <div class="radio">
                                                  <label class="radio-inline">
                                                      <input type="radio" name="status" id="status" value="0">
                                                      </label></td><td style="">
                                              </div>
                                              <div class="type">
                                              <div class="type_left">
                                                  <div class="left_top">
                                                      <span class="shop">XXXX折扣店</span>
                                                  </div>
                                                  <div class="left_down">
                                                      <span class="price">￥50.00</span>优惠券
                                                  </div>
                                                  <div class="left_end">
                                                      订单满<span class="price_before">100元</span>
                                      
                                                  </div>
                                      
                                              </div>
                                              <div style="width: 1px;height: 100%;background-color: #e0e0e0;margin-left: 180px;"></div>
                                              <div class="type_right">
                                                  <div class="right_top">
                                                      <span>有效时间</span>
                                                  </div>
                                                  <div class="right_down">
                                                      <span>2022年4月10日</span>
                                                      <span>2022年6月10日</span>
                                                  </div>
                                                  <div class="rights_end">
                                                      <span>待使用</span>
                                                  </div>
                                                 
                                      
                                              </div>
                                      
                                          </div></td></tr>
                                          <tr data-index="3"><td style=""> 
                                              <div class="radio">
                                                  <label class="radio-inline">
                                                      <input type="radio" name="status" id="status" value="0">
                                                      </label></td><td style="">
                                              </div>
                                              <div class="type">
                                              <div class="type_left">
                                                  <div class="left_top">
                                                      <span class="shop">XXXX折扣店</span>
                                                  </div>
                                                  <div class="left_down">
                                                      <span class="price">￥50.00</span>优惠券
                                                  </div>
                                                  <div class="left_end">
                                                      订单满<span class="price_before">100元</span>
                                      
                                                  </div>
                                      
                                              </div>
                                              <div style="width: 1px;height: 100%;background-color: #e0e0e0;margin-left: 180px;"></div>
                                              <div class="type_right">
                                                  <div class="right_top">
                                                      <span>有效时间</span>
                                                  </div>
                                                  <div class="right_down">
                                                      <span>2022年4月10日</span>
                                                      <span>2022年6月10日</span>
                                                  </div>
                                                  <div class="rights_end">
                                                      <span>待使用</span>
                                                  </div>
                                                 
                                      
                                              </div>
                                      
                                          </div></td></tr>
                                      
                                  </tbody></table></div>
                                  </div>
                                  <div class="modal-footer">
                                      <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                      </button>
                                      <button type="button" class="btn btn-primary">
                                          确定
                                      </button>
                                  </div>
                              </div><!-- /.modal-content -->
                          </div><!-- /.modal -->
                      </div>
                </div>

            </div>

         </div>
         <div class="downs">
             <div class="downs_top">
                 <span>请选择支付方式</span>
                 <div style="width: 100%;height: 1px;background-color: #e0e0e0; margin: auto;"></div>
             </div>
             <div class="downs_pay">
                 <div class="method">
                    <a href="#"> <img src="imgs/zy/微信.png" alt=""></a>
                     <a href="#"><img src="imgs/zy/支付宝.png" alt=""></a>


                </div>
                <div class="cheaper">

                </div>
                <div class="pay_method">
                <div class="pay_method2">
                    <a href="#"><button type="button" class="btn btn-w-m btn-success">返回修改信息</button></a>
                    </div>
                <div class="pay_method1">
                
                    <button type="button" class="btn btn-w-m btn-primary">确认并支付</button>

                    </div>
                </div>
            </div>
        </div>
    </div>




    <script src="plugins/jquery.min.js"></script>
<!-- 引入bootstrap.js/bootstrap.min.js,bootstrap依赖于jquery框架 -->
<script src="plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>